<template>
    <el-form :model="form" ref="account" :label-width="formLabelWidth" :rules="rules" @submit.native.prevent style="box-sizing: border-box;padding: 10px;">
        <el-form-item label="充值方式">
            <el-radio-group v-model="form.deposit_type">
                <el-radio-button label="0">现金</el-radio-button>
                <el-radio-button label="1">支付宝</el-radio-button>
                <el-radio-button label="2">微信</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="金额" prop="money">
            <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$setting.card_title">
            <el-input v-model="form.card_cost" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item v-if="form.deposit_type >0" label="支付码">
            <el-input v-model="form.auth_code" autocomplete="off" @keyup.enter.native.prevent="onSubmit"></el-input>
        </el-form-item>
        <el-form-item label="积分">
            <el-input v-model="form.score" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" :rows="2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item >
            <el-button type="primary" size="medium" :loading="btnLoading" @click.prevent.stop="onSubmit">确定</el-button>
            <el-button v-if="order" type="primary" @click.prevent.stop="onComplete">设为已支付</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {getLodop} from '@/plugins/LodopFuncs' //导入模块
    import {mapState} from "vuex";
    export default {
        name: "Deposit",
        computed: {
            // ...mapState({
            //     current: state => state.card.current,
            // }),
        },
        data() {
            var validateMoney = (rule, value, callback) => {
                if(isNaN(parseInt(value))){
                    callback(new Error('请输入格式金额'));
                }else if(value === 0){
                    callback(new Error('请输入金额'));
                }else {
                    callback();
                }
            };
            return {
                formLabelWidth: '100px',
                form: {
                    id:'',
                    type: 1,
                    deposit_type:0,
                    auth_code:'',
                    money: 0,
                    score: 0,
                    remark: '',
                    card_cost:0
                },
                timeHander:null,
                timeMax:180,
                timeCount:0,
                btnLoading:false,
                rules: {
                    // money: [
                    //     { validator: validateMoney, trigger: 'blur' }
                    // ]
                },
                order:null, //充值订单
                current: {
                    card_sn: '11',
                    name: '111',
                    mobile: '111',
                    money: '111',
                    score: '111',
                    remark: '111'
                }
            }
        },
        methods: {
            initForm() {
                this.form = {
                    id: '',
                    type: 1,
                    deposit_type: 0,
                    auth_code: '',
                    money: 0,
                    score: 0,
                    remark: ''
                }
            },
            onSubmit() {
                this.$refs['account'].validate((valid) => {
                    if (valid) {
                        if (!this.current) {
                            this.$message({type: 'error', message: '未选择有效会员卡,刷新再试'});
                            return
                        }
                        this.btnLoading = true
                        this.form.id = this.current.id
                        this.onDeposit()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //充值
            onDeposit() {
                this.form.card_sn = this.current.card_sn
                this.$http.post('/api/deposits', this.form).then(ret => {
                    let {data} = ret
                    this.order = data
                    this.$http.post('/api/deposits/pay/' + data.id, this.form).then(res => {
                        if (res.data.err_code_des) {
                            this.$alert(res.data.err_code_des, '提示', {
                                confirmButtonText: '确定',
                                callback: action => {}
                            });
                        }
                        this.aliPayCheckOrder(data.id)
                    })
                })
            },
            //手动设为已支付完成
            onComplete(){
                this.$http.post('/api/deposits/complete/' + this.order.id).then(ret => {
                    const result = ret.data
                    if(result.status > 0){
                        this.payFinish(result)
                    }
                })
            },
            aliPayCheckOrder(orderId) {
                const _this = this
                _this.timeHander = setInterval(function () {
                    _this.timeCount++
                    if (_this.timeCount > _this.timeMax) {
                        clearInterval(_this.timeHander)
                    }
                    _this.$http.get('/api/deposits/' + orderId).then(ret => {
                        let order = ret.data
                        if (order.status > 0) {
                            clearInterval(_this.timeHander)
                            _this.payFinish(order)
                        }
                    })
                }, 1000);
            },
            payFinish(order){
                this.$message({type: 'success', message: '操作成功'});
                this.$store.dispatch('card/fetchMemberCard')
                this.initForm()
                this.order = null
                this.printShopReceipt(order)
                this.btnLoading = false
            },
            //打印充值小票
            printShopReceipt(order) {
                let print_receipt = this.$setting.print_receipt
                if (order.card_sn && print_receipt > 0) {
                    let LODOP = getLodop()//调用getLodop获取LODOP对象
                    //LODOP.SET_PRINT_PAGESIZE(0, 760, 800, 'TICKET');
                    let position = this.$setting.print_receipt_position
                    let top = position.top ? position.top : 0
                    let left = position.left ? position.left : 15
                    let font = position.font ? position.font : 12

                    LODOP.PRINT_INIT("");
                    LODOP.SET_PRINT_STYLE("FontSize", font);
                    LODOP.ADD_PRINT_TEXT(top, left, 200, 20, '会员卡号: ' + order.card_sn);
                    LODOP.ADD_PRINT_TEXT(top + 20, left, 200, 20, '会员姓名: ' + order.card.name);
                    LODOP.ADD_PRINT_TEXT(top + 40, left, 200, 20, '联系电话: ' + order.card.mobile);
                    LODOP.ADD_PRINT_TEXT(top + 60, left, 200, 20, '本次充值: ' + order.money);
                    LODOP.ADD_PRINT_TEXT(top + 80, left, 200, 20, '卡内余额: ' + order.card.money);
                    LODOP.ADD_PRINT_TEXT(top + 100, left, 200, 20, '会员积分: ' + order.card.score);
                    LODOP.ADD_PRINT_TEXT(top + 120, left, 400, 20, '充值时间: ' + order.created_at);
                    LODOP.ADD_PRINT_TEXT(top + 140, left, 400, 20, '充值方式: ' + order.type_txt);
                    LODOP.PRINT()
                }
            },
        }
    }
</script>

<style scoped>

</style>